<template>

	<view>
		<view class="input">
			<uni-search-bar class="custom-search-bar" :radius="100" placeholder="请输入需要输入的内容" bgColor="#FFFFFF"
				@confirm="search" cancelButton="none" v-model="searchValue">
				<template v-slot:searchIcon>
					<uni-icons color="#2176F3" size="18" />
					<image class="search-icon" src="/static/images/搜索.png"></image>
				</template>

			</uni-search-bar>
			<view style="color: #fff; margin-top: -10rpx;padding: 0 20rpx;">
				历史记录：
				<view class="history-list">
					<text class="history-item" v-for="(item,index) in historyList" :key="index"
						@click="clickHistory(item)">
						{{ item }}
					</text>
				</view>
			</view>
		</view>
		<!-- 店铺列表（循环渲染自定义卡片） -->
		<view class="shop-list">
			<view class="shop-card" v-for="(shop, index) in shopList" :key="index" @click="gotoShopDetail(shop.id)">
				<!-- 店铺名称 + 距离 -->
				<view class="shop-header">
					<text class="shop-name">{{ shop.name }}</text>
					<text class="shop-distance">{{ shop.distance }}11</text>
				</view>

				<!-- 评分 + 销量 -->
				<view class="shop-rating">
					<image class="star-image" v-for="i in shop.rate" :key="i" src="/static/images/五星 拷贝.png"
						mode="widthFix"></image>
					<text class="score">{{ shop.rate }}分</text>
					<text class="sales">销量: {{ shop.sales }}</text>
				</view>

				<!-- 店铺图片 + 营业时间 + 地址 -->
				<view class="shop-info">
					<image class="shop-image" :src="shop.photo" mode="widthFix"></image>
					<view class="shop-desc">
						<text>营业时间: {{ formatTime(shop.startTime) }}-{{ formatTime(shop.endTime)}}</text>
						<text>{{ shop.description }}</text>
						<text>{{ shop.address }}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		get,
		post
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				id: null,
				searchValue: "",
				// 店铺列表数据（实际可从接口获取）
				shopList: [],
				historyList: []

			}
		},
		onLoad(options) {
			this.getHistory(),
				this.id = options.typeId || null,
				this.getShopData(this.id)
			console.log(options)
		},
		methods: {
			getHistory() {
				get('/merchant/shop/history')
					.then((resData) => {
						if (resData.code === 200) {
							this.historyList = resData.data;
						} else {
							this.historyList = [];
							uni.showToast({
								title: resData.msg || '获取历史失败',
								icon: 'none'
							});
						}
					})
					.catch((error) => {
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
						console.error('getHistory error:', error);
					});
			},
			// 点击历史记录
			clickHistory(item) {
				this.searchValue = item // 把历史记录值赋给搜索框
				this.search({
					value: item
				}) // 调用搜索方法
			},
			search(res) {
				const query = res.value ? res.value.trim() : '';
				console.log(query);

				if (!query) {
					// 如果没有输入，返回所有店铺
					this.getShopData(this.id);
					return;
				}

				// 用封装好的 get 方法调用后端
				get(`/merchant/shop/search`, {
						name: query
					})
					.then((resData) => {
						if (resData && resData.code === 200 && resData.data && resData.data.length > 0) {
							// 更新店铺列表为搜索结果
							this.shopList = resData.data;
							// 刷新历史记录
							this.getHistory();
						} else {
							this.shopList = []; // 清空原来的列表
							uni.showToast({
								title: '没有找到匹配的店铺',
								icon: 'none'
							});
						}
					})
					.catch((error) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error(error);
					});
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			gotoShopDetail(shopId) {
				uni.navigateTo({
					url: `/pages/carMaintenance/storeDetails/storeDetails?shopId=${shopId}&typeId=${this.id}`
				})
			},
			getShopData(id) {
				uni.showLoading({
					title: '加载中'
				});
				get(`/merchant/shop/type/${id}`)
					.then(res => {
						if (res.code === 200) {
							this.shopList = res.data;
							uni.showToast({
								title: '获取数据成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.msg || '获取数据失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error('请求失败:', err);
						uni.showToast({
							title: '请求失败，请检查网络',
							icon: 'none'
						});
					})
					.finally(() => {
						uni.hideLoading();
					});
			},
			formatTime(timeString) {
				if (!timeString) return '';
				// 直接提取 HH:mm 格式的时间
				return timeString.slice(11, 16);
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>
<style scoped>
	.page {
		background-color: #F8F8F8;
	}

	.input {
		position: relative;
		background-color: #2176F3;
	}

	.search-icon {
		height: 24rpx;
		width: 24rpx;
		margin-right: -10rpx;
		margin-left: 10rpx;
	}


	.history-list {
		margin-top: 20rpx;
		padding-bottom: 60rpx;
		line-height: 20rpx;
		display: flex;
		gap: 15rpx;
		/* 项之间的间距 */
		flex-wrap: wrap;
		/* 可选：防止屏幕过小时“换行” */
	}

	/* 历史项文字样式（白色、字号） */
	.history-item {
		color: #fff;
		font-size: 24rpx;
	}

	/* 店铺卡片：整体布局+阴影 */
	.shop-list {
		position: relative;
		top: -45rpx;
		z-index: 2;
		padding: 10rpx;
	}

	.shop-card {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 店铺头部：名称+距离 */
	.shop-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.shop-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.shop-distance {
		font-size: 24rpx;
		color: #2176F3;
	}

	/* 评分区域：星级+分数+销量 */
	.shop-rating {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.star-image {
		width: 30rpx;
		/* 星星宽度 */
		height: 30rpx;
		/* 星星高度 */
		margin-right: 4rpx;
		/* 星星之间的间距 */
	}

	.score {
		margin: 0 10rpx;
		font-size: 24rpx;
	}

	.sales {
		margin-left: 30rpx;
		font-size: 24rpx;
		color: #999;
	}

	/* 店铺信息：图片+描述 */
	.shop-info {
		display: flex;
		align-items: flex-start;
	}

	.shop-image {
		width: 200rpx;
		height: 150rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.shop-desc {
		display: flex;
		flex-direction: column;
	}

	.shop-desc text {
		font-size: 24rpx;
		margin-bottom: 8rpx;
		color: #666;
	}
</style>